/** *
 * @author 
 * @description oneTableListMinix 适合用于单表的操作及其在两张表的情况
 *              两张表的情况下有如下的特征才能使用onetableListMixins
 *              1. 两张表的关联的只有两张表，没有中间表的情况下，也就是说子表中一定存储主表的主键id进行的
 *              2. 使用的过程过程中一定要记住Mixins的特点：混合方式的特点如下：
 *                1）数据对象： data mixins的数据对象和组件的数据发生冲突的时候以组件数据优先
 *                2）钩子函数： 生命周期的函数 同名的钩子函数将会混合成一个数组，都将进行调用到，但是混入对象的钩子在组件自身钩子之前调用
 *                3) 值对象的选项： 比如 methods components 和 directives 都将混为同一个对象，两个对象键名冲突时，取组件对象的键值对
 *   mixins的特点
 *      1 方法和参数在各组件中不共享
 *
 *   oneTableListMixins 进行两张表的情况下有两种方式进行：
 *    第一个是通过store 代表是dictManage 适合传递的数据状态比较多的情况
 *    另一个是通过vue的传参  代表是roleManage 适合传递的数据状态比较少的情况
 * */
 import {getAction, getPageListAction, deleteAction} from '@/api/manage'
 import { filterObj } from '@/utils/util'


 export const OneTableListMixins= {
   data() {
     return {
       queryParam: {}, // 查询条件的model
      commonQueryParam: {}, //commonsearch 查询条件
      defaultQueryParam: {}, // 查询条件的默认值
      /**何时进行加载loaddata的数据，
       * 默认create加载,
       * 1.此属性主要解决加载数据的时候是通过上一个页面的树形进行条件过滤，不增加这个属性，会加载两个表格数据
       * 2.解决必须点击查询按钮的时候进行加载页面数据
       * **/
      isLoadDataCreate: true,
      /**
       *按钮权限的相关的参数
       * */
      btnOperator: {
        isShowList: true,
        isShowRow: true
      },
      /**
       * 是否存在分页的判断
       * */
      isHasPage: true,
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      pageParam: {
        total: 0, // 总记录数
        current: 1, // 页码
        size: 10, // 每页记录数
        pageSizes: [10, 15, 20, 30], // 选择每页显示多少条数据
        layout:'sizes, prev, pager, next, jumper, ->, total',
      },
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      /* 筛选参数 */
      filters: {},
      /* table加载状态 */
      loading: false,
      /* table选中keys*/
      selectedRowKeys: [],
      /* 单选框保存的数据 */
      radioSelect: '',
      radioSelectRow: {},
      /* table选中records*/
      selectionRows: [],
      /* 查询折叠 */
      toggleSearchStatus: false,
      /*tableData:dialog弹窗要携带的数据*/
      tableData: {},
      tableHeight: 500,
      clientHeight: document.documentElement.clientHeight, // 当前窗口高度
      

    }
    
   },
   // 增加了其他页面传递的参数过滤
   props: {
      propQueryParam: {
        type: Object,
        default: function(){
          return {}
        }
      }
    },
   created() {
     console.log('onetablemixins loadData')
     /* 计算页面表格高度 */
    this.calcTableH();
    /* 加载列表数据 */ 
    if (this.isLoadDataCreate) {
      this.loadData();
    }
   },
   beforeMount() {
     window.addEventListener('resize',this.throttle(this.resizeHeight, 500))
   },
   beforeDestroy() {
     window.removeEventListener('resize',this.throttle)
   },
     watch: {
    radioSelect: {
      handler: function(val, oldValue) {
        console.log('OneTableListMixins watch radioSelect');
        if (val && val !== oldValue) {
          this.watchRadioSelect(val);
        }
      }
    }
  },
   methods:{  
    //调用api模块，加载列表
    loadData(arg,callback) {
      if(!this.url || !this.url.list){
        this.$message.error('请在页面设置url.list属性')
        return
      }

      // 加载数据 若传入参数为1则加载第一页的内容
      if(arg === 1){
        this.pageParam.current = 1;
      }

      const params = this.getQueryParams() // 获取查询条件
      this.loading = true
      const that = this;
      this.dataSource = []
      getAction(this.url.list, params)
        .then(res => {
          if (res.success) {
            if (that.isHasPage) {
              that.dataSource = res.data.rows
              that.getFirstDataID();
              that.pageParam.total = res.data.total
              //2020年3月5日 16:58:24
              //修复当删除最后一页最后一条数据时，使其正确的设置当前页码比如：由21条数据->20条数据时，页码应为2而不是3
              if (
                that.pageParam.current >
                Math.ceil(that.pageParam.total / that.pageParam.size)
              ) {
                that.pageParam.current = Math.ceil(
                  that.pageParam.total / that.pageParam.size
                );
                //此方法也只有在上述描述的情况出现调用2次，且必须调用2次才能实现，第一次loadData完进行计算得到总页码数然后进行重新加载
                this.loadData();
              }
            } else {
              that.dataSource = res.result;
              that.getFirstDataID();
            }
            //add by lj@20200831 增加加载数据后的回掉处理
            if (callback) {
              callback();
            }
          }
          if (res.code === 510) {
            // 需要处理其他的异常状态后续进行补充
            that.$message.warning(res.message);
          }
          that.loading = false;
        })
        .catch(() => {
          this.loading = false;
        })
    },
    // 初始字典数据
    initDictConfig() {
      // console.log('在各个页面进行处理 initDictConfig');
    },
    // 主要是获取关联的id 需要在loaddata之前进行调用 用于两个表从表的加载数据用到的id 这个需要结合store 进行获取减少传参的复杂度
    getRelationsId() {
      // console.log('在各个模块进行处理 getRelationsId');
    },
    // 增加了getFirstDataId的方法主要是在单选的联动标的时候，每次加载loaddata的时候将第一条数据id 赋值给radioSelect
    getFirstDataID() {
      // console.log(
      //   '在各个模块进行处理 getFirstDataID,在单选框的时候需要加载完数据的时候将数据的第一条的id赋值给radioSelect'
      // );
    },
    // 监控每个radioselect的方法 在监视里面进行调用 给radioselect进行复制
    watchRadioSelect(val) {
      // console.log('在各个模块进行处理 watchRadioSelect');
    },
    // 增加字段排序的监听
    sortChange(column, prop, order) {
      console.log(
        'prop==[' +
          column.property +
          '],order==[' +
          column.order +
          '],prop=[' +
          prop +
          ']'
      );
      this.isorter.column = column.column.property;
      if (column.column.order === 'ascending') {
        this.isorter.order = 'asc';
      } else if (column.order === 'descending') {
        this.isorter.order = 'desc';
      } else {
        this.isorter = {
          column: 'createTime',
          order: 'desc'
        };
      }
      this.loadData();
    },
    // 序号加载
    indexMethod(index) {
      if (this.pageParam.current > 1) {
        return (this.pageParam.current - 1) * this.pageParam.size + index + 1
      }else {
        return index + 1
      }
    },
    // 监听 每页条数 改变
    handleSizeChange(size) {
      this.pageParam.size = size
      this.loadData()
    },
    // 监听页码值 改变的事件
    handleCurrentChange(current) {
      this.pageParam.current = current
      this.loadData()
    },
    // 重置查询表单数据
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.queryParam = {}
      this.queryParam = Object.assign(
        {},
        this.defaultQueryParam,
        this.queryParam
      )
      this.loadData(1)
    },
    // 提交查询表单
    onSubmit() {
      this.loadData();
    },
    // 计算表格高度
    calcTableH() {
      this.tableHeight = this.clientHeight -240
      
    },
    /**
     * 节流函数
     * @param {*} fn 方法名
     * @param {*} delay 延迟执行时间
     */
    throttle(fn, delay) {
      let valid = true
      return function() {
        if(!valid) {
          return false
        }
        valid = false
        setTimeout(() => {
          fn();
          valid = true;
        }, delay)
      }
    },
    /* 重新计算高度 */
    resizeHeight() {
      this.clientHeight = document.documentElement.clientHeight
      this.calcTableH()
    },
    // 在编辑和新增的时候执行完成之后需要进行刷新表格数据 @ok = 'modelFormOk'
    modalFormOk() {
      this.loadData()
    },
    //表格中获取选中行信息
    handleSelectChange(val) {
      this.selectionRows = val
      this.selectedRowKeys = this.selectionRows.map(row => row.id) 
      console.log('selectionRows=' + this.selectionRows.length);
    },
    /* 获取查询条件 */
    getQueryParams() {
      this.getRelationsId()
      var param = Object.assign(
        {},
        this.defaultQueryParam,
        this.propQueryParam,
        this.queryParam,
        this.filters,
        this.commonQueryParam
      )
      param.current = this.pageParam.current
      param.size = this.pageParam.size
      return filterObj(param)
    },
    getRelationsId(){
      console.log('在各个模块进行处理getRelationsId')
    },
    // 添加的方法
    handleAdd() {
      if (!this.url.save) {
        this.$message.error('请设置url.save属性!');
        return;
      }
      this.$refs.modelDialog.showDialogAdd(
        this.moduleName + '新增',
        this.url.save,
        undefined,
        undefined,
        { moduleName: this.moduleName },
        this.tableData
      );
    },
    // 修改的方法
    handleEdit(record, isLoadData) {
      if (!this.url.edit) {
        this.$message.error('请设置url.edit属性!');
        return;
      }
      if (!isLoadData) {
        isLoadData = false;
      }
      // 判断是否传递了根据Id进行获取数据
      if (isLoadData && !this.url.queryById) {
        this.$message.error('请设置url.queryById的属性!');
        return;
      }
      this.$refs.modelDialog.showDialogEdit(
        this.moduleName + '编辑',
        record,
        this.url.edit,
        undefined,
        undefined,
        isLoadData,
        this.url.queryById,
        { moduleName: this.moduleName }
      );
    },
    // 详情的页面
    handleInfo(record, isLoadData = false) {
      if (!isLoadData) {
        isLoadData = false;
      }
      // 判断是否传递了根据Id进行获取数据
      if (isLoadData && !this.url.queryById) {
        this.$message.error('请设置url.queryById的属性!');
        return;
      }
      this.$refs.modelDialog.showDialogInfo(
        this.moduleName + '详情',
        record,
        undefined,
        undefined,
        isLoadData,
        this.url.queryById,
        {}
      );
    },
    // 根据id删除
    handleDelete(id, callback) {
      if(!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      this.$confirm('是否删除该条数据？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        deleteAction(this.url.delete,{id: id}).then(res => {
          if(res.success) {
            this.$message.success('操作成功')
            if(callback) {
              callback()
            }else{
              this.loadData()
            }
          }else{
            this.$message.warning(res.message)
          }
        })
      }).catch(res => {
        if(res === 'cancel') {
          this.$message.info("取消删除！")
        }
      })
    },
    //批量删除
    batchDelete() {
      if (!this.url.batchDelete) {
        this.$message.error('请设置url.batchDelete属性！')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      }else {
        var ids = ''
        for(var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        this.$confirm('是否删除选中数据？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          deleteAction(this.url.batchDelete, {ids: ids}).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.loadData()
            }else{
              this.$message.warning(res.message)
            }
          })
        }).catch(res => {
        if(res === 'cancel') {
          this.$message.info("取消删除！")
        }
      })
      }
    },
    // 树形选择时的select
    treeSelect(selection, row) {
      if (
        selection.some(el => {
          return row.id === el.id;
        })
      ) {
        if (row.children) {
          row.children.map(j => {
            this.toggleSelection(j, true);
            if (j.children) {
              j.children.map(k => {
                this.toggleSelection(k, true);
              });
            }
          });
        }
      } else {
        if (row.children) {
          row.children.map(j => {
            this.toggleSelection(j, false);
            if (j.children) {
              j.children.map(k => {
                this.toggleSelection(k, false);
              });
            }
          });
        }
      }
    },
    // 树形选择时的selectall
    treeSelectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.dataSource.map(j => j.id);
        return tableDataIds.includes(el.id);
      });
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.dataSource.every(el => {
        const selectIds = selection.map(j => j.id);
        return selectIds.includes(el.id);
      });
      if (isSelect) {
        selection.map(el => {
          if (el.children) {
            el.children.map(j => {
              this.toggleSelection(j, true);
              if (j.children) {
                j.children.map(k => {
                  this.toggleSelection(k, true);
                });
              }
            });
          }
        });
      }
      if (isCancel) {
        this.dataSource.map(el => {
          if (el.children) {
            el.children.map(j => {
              this.toggleSelection(j, false);
              if (j.children) {
                j.children.map(k => {
                  this.toggleSelection(k, false);
                });
              }
            });
          }
        });
      }
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable &&
            this.$refs.multipleTable.toggleRowSelection(row, select);
        });
      }
    },
    // table row select click
    rowSelectClick(row, colum, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
      this.radioSelect = row.id;
      console.log('this.radioSelect=' + this.radioSelect);
    },
    // table row radio click
    rowRadioClick(row, colum, event) {
      if (this.radioSelect === '' || this.radioSelect !== row.id) {
        // 解决事件冲突
        this.radioSelect = row.id;
        this.radioSelectRow = row;
        console.log('radioSelect=' + this.radioSelect);
      }
    },
    // radio 变化
    handleRadioChange(val) {
      if (this.radioSelect === '' || this.radioSelect !== val) {
        // 解决事件冲突
        this.radioSelect = val;
        console.log('radioSelect=' + this.radioSelect);
      }
    },
    // radio选择
    handleRadioRowChange(row) {
      if (this.radioSelect === '' || this.radioSelect !== row.id) {
        // 解决事件冲突
        this.radioSelect = row.id;
        this.radioSelectRow = row;
        console.log('radioSelect=' + this.radioSelect);
      }
    },
    // 查询条件收起展开
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
   }
 }